import React,{Component} from 'react';
import Adaptive from '../component/adaptive/Adaptive';
import asyncComponent from '../../Bundle';
import Header from '../system/header/Header';
import Lang from './Lang.json';
import Source from './source/Source';
import queryString from 'query-string';
//pc
const Carouse = asyncComponent(() => import('./slideBanner/SlideBanner'));
const List = asyncComponent(() => import('../system/list/List'));
const Footer = asyncComponent(() => import('../component/footer/Footer'));
//mobile
const MobileCarouse = asyncComponent(() => import('./mobile-swiper/MobileSwiper'));
const MobileContent = asyncComponent(() => import('./mobile-content/MobileContent'));
const FooterMobile = asyncComponent(() => import('../component/footer-mobile/FooterMobile'));
class Best extends Component{
    render(){
        let page = queryString.parse(this.props.location.search).page;
        return(
            <div>
                <Header refName="about" childNodes="about-a" choseImgDisplay="none"/>
                <Adaptive desktop={<Carouse/>} phone={<MobileCarouse/>} size={1200}/>
                <Adaptive desktop={<List list={Lang} Source={Source} listPosition="left"/>} phone={<MobileContent page={page?page:'0'}/>} size={1200}/>
                <Adaptive desktop={<Footer/>} phone={<FooterMobile/>} size={1200}/>
            </div>
        )
    }
};
export default Best;